Custom Question

customQuestion is an experimental template to support input questions like asking for name, email, and phone number. It mimics the way [Questions](Onboarding Templates/Questions) step works with some tweaks.

Step Config

Key	Description	Is Optional?
`type`	Should be `customQuestion` to differs from other steps	Required
`stepId`	Unique step identifier.	Required
`backgroundColor`	Step background color.	Required
`question`	The question configuration	Required

Question Config

Key	Description	Is Optional?
`type`	Should be option of [`phoneNumber`]._{NB: This list can be expanded for future extensions}	Required
`title`	Question title	Optional
`subtitle`	Question subtitle	Optional
`subtitleColor`	Color of subtitle	Optional
`ctaColor`	Background color of CTA button	Required
`ctaText`	CTA text	Required
`ctaTextColor`	Color of CTA text	Required
`placeholder`	Question input placeholder	Required
`placeholderColor`	Question input placeholder color	Optional
`textColor`	Step text color	Required
`backgroundImage`	The background image of the page	Optional
`invalidInputMessage`	Invalid message to be shown on validation error	Optional
`trackAsNewUserProperty`	Boolean to track new keys to Amplitude	Optional
`userPropertyKey`	Key name to be sent to Amplitude	Optional
`useHTML`	Whether the entered content will be contain `HTML` tags like `<strong/>` or plain text.	Optional
`isSkippable`	Whether the question can be skipped or not	Optional
`skipButtonColor`	The color of skip button	Optional
`skipButtonBackgroundColor`	Background color of skip button	Optional
`consentBackgroundColor`	Background for the consent section	Optional
`consentMessage`	Consent checkbox message	Optional
`consentMessageColor`	Consent checkbox message color	Optional
`consentCheckColor`	Consent check icon color	Optional
`consentCheckboxColor`	Consent checkbox background color in case it’s not selected	Optional
`consentCheckboxSelectedColor`	Consent checkbox background color in case it’s selected	Optional
`termsAndPrivacyLinks`	Whether to add terms & conditions and privacy policy links or not	Optional
`termsAndPrivacyLinksColor`	Color of terms & conditions and privacy policy	Optional
`introTitle`	Intro title	Optional
`introTitleColor`	Intro title color	Optional
`introSubtitle`	Intro subtitle	Optional
`introSubtitleColor`	Intro subtitle color	Optional
`introImage`	Intro image URL	Optional

Example

CustomQuestion (phoneNumber scenario)

{
    "id": "time_app_id",
    "journeyId": "yIW1gspaNl",
    "bold": true,
    "appId": "co.thefab.tm",
"language":"en",
    "seo": {
        "title": "Clarify",
        "favicon": "https://c.thefab.co/web-onboarding/time/time-favicon.png",
        "description": "Conquer the chaos and embrace a more focused and organized life with Clarify, the ultimate time management app designed for individuals with ADHD, those who suspect they have ADHD, or anyone who wants to improve their executive functioning skills."
    },
    "managerConfig": {
        "type": "energy",
        "properties": {
            "onboarding_in_app_message_sequence_enabled": false,
            "onboarding_play_alternate_pings": true,
            "onboarding_play_background_music": true
        }
    },
    "sections": [
    ],
    "steps": [
        {
            "type": "interstitial",
            "stepId": "welcome_inter",
            "shouldFadeIn": false,
            "config": {
                "id": "welcome_inter",
                "title": "",
                "image": "https://storage.googleapis.com/c.thefab.co/web-onboarding/time/bold-sprint/img_clarify_splashpage_02_opt.jpg",
                "color_cta": "#ffffff",
                "color_cta_button": "#183BC6",
                "subtitle": "",
                "cta": "Continue",
                "hide_close_icon": true,
                "color_background": "#ffffff",
                "mode": "BOLD",
                "textColor": "#fff",
                "imageAltText": "Thriving with attention deficit in a world of distractions. Boost your executive skills, stay focused, and reach your goals."
            }
        },
        {
            "type": "customQuestion",
            "stepId": "questions_sms",
            "backgroundColor":"#F8F8F8",
            "question": 
                {
                    "type": "phoneNumber",
                    "isSkippable": true,
                    "skipButtonColor": "#183bc6",
                    "title": "Please enter your phone number",
                    "ctaColor": "#183BC6",
                    "ctaTextColor": "#FFFFFF",
                    "textColor": "#15191D",
                    "ctaText": "Continue",
                    "placeholder": "My phone number is ...",
                    "placeholderColor": "#808080",
                    "consentMessage": "I agree to receive SMS messages",
                    "consentMessageColor": "#183bc6",
                    "consentCheckboxColor": "#183bc6",
                    "consentCheckboxSelectedColor": "#183bc6"
                }
        },
        {
            "type": "questions",
            "stepId": "questions_name",
            "backgroundColor":"#F8F8F8",
            "questions": 
            [
                {
                    "type": "name",
                    "title": "One last thing, what do your friends call you?",
                    "subtitle": "We will use this for your personal plan.",
                    "bottomBarColor": "#D6E0FF",
                    "ctaColor": "#183BC6",
                    "backgroundColor": "#FFFFFF",
                    "ctaTextColor": "#FFFFFF",
                    "textColor": "#15191D",
                    "ctaText": "Continue",
                    "placeholder": "My name is ...",
                    "placeholderColor": "#808080"
                },
                {
                    "type": "email",
                    "title": "Enter your email to save your progress",
                    "showEmailCheckmark": true,
                    "emailRequired": true,
                    "showImprovedEmailSuggestion": true,
                    "bottomBarColor": "#D6E0FF",
                    "ctaColor": "#183BC6",
                    "backgroundColor": "#FFFFFF",
                    "ctaTextColor": "#FFFFFF",
                    "tickColor": "#15191D",
                    "selectedTickBackgroundColor": "#25756B",
                    "textColor": "#15191D",
                    "ctaText": "Continue",
                    "placeholder": " example@email.com",
                    "placeholderColor": "#808080",
                    "invalidEmailMessage": "* Please enter a valid email address"
                }

            ]

        },
        {
            "type": "contract",
            "stepId": "contract",
            "title": "{{NAME}}'s Contract",
            "subtitle": "\nI, {{NAME}}, commit to wholeheartedly embracing my uniquness and using my strengths, like creativity and hyperfocus, to enhance the skills I wish to improve.\n\nI will strive to overcome challenges by advocating for myself, seeking support, and viewing setbacks as growth opportunities.",
            "hint": "Note: Science shows believing in change and committing to it through contracts like this one helps in achieving goals.",
            "backgroundImage": "https://storage.googleapis.com/c.thefab.co/web-onboarding/time/bold-sprint/img_clarify_background_purple.jpg",
            "backgroundColor": "#D6E0FF",
            "congratTextColor": "#15191D",
            "ctaText": "Commit",
            "ctaColor": "#FFFFFF",
            "ctaBackgroundColor": "#183BC6",
            "desktopBackground": "https://storage.googleapis.com/c.thefab.co/web-onboarding/time/bold-sprint/img_clarify_background_purple.jpg"
        },
        {
           "type": "webview",
           "stepId": "science_of_clarify",
           "url": "https://storage.googleapis.com/c.thefab.co/web-onboarding/time/webview/science-of-clarify-en.html",
           "ctaText": "Continue",
           "showWebfloatingButtonDelay": 2000,
           "showFullScreen": true,
           "ctaColor": "#FFF",
           "ctaBackgroundColor": "#183BC6",
           "bottomViewColor": "#FFF",
           "backgroundColor":"#FFF",
           "bottomViewBoxShadow":"-2px 0px 3px 0px rgba(74,74,74,0.05)"
       },
        {
            "type": "webview",
            "stepId": "webviewPremium49",
            "engine": "premium",
            "module": "webfloating_pricing_control",
            "hideCloseButton": true,
            "subprintText": "",
            "subprintColor": "#9B9B9B",
            "topSubprintColor": "#5F5F5F",
            "isOffer": true,
            "showTrialReminderDialog": true,
            "ctaText": "Start my free trial now",
            "topSubprintText": "2 taps to start, super easy to cancel",
            "deepLink": "{{APPLICATION_ID}}://pay/normalannual",
            "showWebfloatingButtonDelay": 20000,
            "redirectTo": "https://time.thefabulous.co/payment/pwyw/new-pwyw-clarify-v2?plans=tm-subs-bimonthly-normal-intro-1-fortynine,tm-subs-bimonthly-normal-intro-11-fortynine,tm-subs-bimonthly-normal-intro-16-fortynine&offerPlan=tm-subs-bimonthly-discount-23&upsellPath=/journey/upselling/fabulous-upsell-v1&upsellPath2=/journey/time/clarify-upsell-v2-pdf&offerDiscount=50",
            "backgroundColor": "#FFF"
        }
        
    ],
    "logic": []
}

Step Config

Question Config

Example​

Example